<script setup lang="ts">
import { ref, onMounted  } from "vue";
import { useVideoStore } from "@/stores/video";
import { storeToRefs } from "pinia";
import TheWelcome from "@/components/TheWelcome.vue";
import emitter from './utils/bus'
const videoStore = useVideoStore();
const { videoUrl, isPreviousButtonShow, isNextButtonLoading } =
  storeToRefs(videoStore);

const { init, previousVideo, nextVideo ,getOtherData} = videoStore;

/**
 * @type {boolean} -是否开启自动播放
 */
let isAuto = ref(true);

/**
 * 视频是否播放到结尾
 */
let isVideoEnd = ref(false);

/**
 * 视频播放到结尾
 */
function videoEndSlove() {
  isVideoEnd.value = true;
  if (isAuto.value) {
    setTimeout(() => {
      nextVideo();
    }, 1000)
  }
}

/**
 * 切换自动连播状态
 */
function switchSlove() {
  if (isVideoEnd.value && isAuto.value) {
    nextVideo();
  }
}

/**
 * 批量更新
 */
function usePatchJust(){
  //如果只是单个变量直接修改就行，当然得注意别修改const类型的地址

  videoStore.$patch(//没有改变内容，示范而已
    (state) => {
      state.isNextButtonLoading = state.isNextButtonLoading;
      state.videoUrlList = state.videoUrlList;
      state.videoIndex = state.videoIndex;
    }
  )
}

const sendMitt=()=>{
  emitter.emit('myBus', 123)
}


init(); //初始化一下
usePatchJust();//批量更新
console.log(getOtherData());//获取其他数据并输出

</script>

<template>
  <!-- <TheWelcome /> -->
  <!-- <button @click="sendMitt">点我发送mitt</button> -->
  <el-card class="el-card-class">
    <template #header>
      <div class="header-class">
        <div>懒大人演唱会</div>
        <div>
          <el-switch @change="switchSlove" v-model="isAuto" active-text="自动播放"></el-switch>
        </div>
      </div>
    </template>
    <template #default>
      <div>
        <video  @play="isVideoEnd = false" @ended="videoEndSlove" controls="true" autoplay :src="videoUrl"
          class="video-class"></video>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" size="large" @click="previousVideo" :disabled="!isPreviousButtonShow">上一首</el-button>
      <el-button type="primary" size="large" @click="nextVideo"
        :loading="isNextButtonLoading">下一首</el-button></template>
  </el-card>
</template>

<style scoped>
.el-card-class {
  width: 1320px;
  height: 910px;
}

.header-class {
  display: flex;
  justify-content: space-between;
}

.video-class {
  width: 100%;
  max-width: 100%;
  /* 最大宽度 */
  height: 720px;
  object-fit: contain;
  /* 控制视频如何适应其框架 */
  border-radius: 5px;
}
</style>
